.home-banner {
  width: 100%;
  height: 285px;

  .h-banner-warp {
    position: relative;
    width: 982px;
    height: 285px;
    margin: 0 auto;

    .banner-content {
      width: 730px;
      height: 285px;

      .img {
        width: 100%;
        height: 285px;
        transition: none 0.2s ease 0s;
        opacity: 1;
        cursor: pointer;
      }

      .img-switching {
        transition: opacity 1s ease-in 0s;
        opacity: 0.2;
      }

      .btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 37px;
        height: 63px;
        border: none;
        outline: none;
        cursor: pointer;
      }

      .left-btn {
        left: -68px;
        background: url('@/assets/image/home/banner/banner-btn-left.png');
        background-position: 0 -378px;

        &:hover {
          background: url('@/assets/image/home/banner/banner-btn-left-hover.png');
          background-position: 0 -441px;
        }
      }

      .right-btn {
        right: -68px;
        background: url('@/assets/image/home/banner/banner-btn-right.png');
        background-position: 0 -503px;

        &:hover {
          background: url('@/assets/image/home/banner/banner-btn-right-hover.png');
          background-position: 0 -566px;
        }
      }
    }

    .banner-dots {
      position: absolute;
      top: 259px;
      left: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 730px;
      height: 20px;

      .item {
        width: 20px;
        height: 20px;
        background: url('@/assets/image/home/banner/banner-dot.png');
        background-position: 0 -340px;
        cursor: pointer;

        &:hover {
          background: url('@/assets/image/home/banner/banner-dot-hover.png');
          background-position: 0 -340px;
        }
      }

      .active-item,
      .active-item:hover {
        background: url('@/assets/image/home/banner/banner-dot-hover.png');
        background-position: 0 -340px;
      }
    }

    .download {
      position: absolute;
      top: 0;
      right: -4px;
      z-index: 9;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 256px;
      height: 285px;
      background: url('@/assets/image/home/banner/download.png') no-repeat;

      .link {
        width: 215px;
        height: 56px;
        margin-top: 186px;
        cursor: pointer;
      }

      .intro {
        margin-top: 10px;
        font-size: 12px;
        color: #8d8d8d;
      }

      .shadowl {
        position: absolute;
        top: 0;
        left: -20px;
        width: 20px;
        height: 285px;
        background: url('@/assets/image/home/banner/banner-download-shadow.png');
        background-position: -1px 0;
      }

      .shadowr {
        position: absolute;
        top: 0;
        right: -18px;
        width: 20px;
        height: 285px;
        background: url('@/assets/image/home/banner/banner-download-shadow.png');
        background-position: -20px 0;
      }
    }
  }
}